<template>
    <div class="finance accound">
        <section class="order-main-header">
            <mt-header :title="entrustAsset.name">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            </mt-header>
        </section>
      <section class="finance-card otc">
            <dl>
                <dt >
                    <dd class="profit">
                       <div class="flex-center">
                            <div class="flex-column user-able">
                                <span>可用</span>
                                <span>{{entrustAsset.total}}</span>
                            </div>
                             <div class="flex-column user-able">
                                <span>冻结</span>
                                <span>{{entrustAsset.frozen}}</span>
                            </div>
                             <div class="flex-column user-able">
                                <span>折合（CNY）</span>
                                <span>{{filter((totalValue)*okerRatePrice*symbol.lastDealPrize)}}</span>
                            </div>
                       </div>
                    </dd>
                </dt>
            </dl>
            <button><i class="mobile_icon_public"></i></button>
        </section>
        <section  class="asset">
               <div class="trade-order">
                     <div class="page-tabbar-tab-container content">
                        <div id="tab-container1" >
                            <div class="trade-order--content" id="order-list">
                                <div >
                                    <div class="recold">财务记录</div>
                                    <div
                             v-infinite-scroll="loadMore"
                            infinite-scroll-disabled="loading"
                            infinite-scroll-distance="10"  class="newsList">
                                        <div class="order-table"   v-for="(ticker, i) in recordList" v-bind:key="i">
                                            <div class="order-header">
                                                <div class="flex-between ">
                                                    <span  class="order" v-if="ticker.type==1">充值 </span>
                                                    <span   class="order" v-if="ticker.type==2">提币</span>
                                                    <span  class="order" v-if="ticker.type==3">法币买入 </span>
                                                    <span  class="order" v-if="ticker.type==4">法币卖出</span>
                                                    <span  class="order" v-if="ticker.type==5">交易手续费  </span>
                                                    <span  class="order" v-if="ticker.type==6">锁仓转出  </span>
                                                    <span  class="order" v-if="ticker.type==7">锁仓转入 </span>
                                                    <span  class="order" v-if="ticker.type==8">空投奖励</span>
                                                    <span  class="order" v-if="ticker.type==9">提币手续费</span>
                                                </div>
                                            </div>
                                            <div class="order-content flex-between">
                                                <div class="flex-center">
                                                <div class="all-amount flex-column">
                                                    <span style="color:rgba(134, 134, 192, 1)">数量</span>
                                                    <span>{{ticker.amount}}</span>
                                                </div>
                                                <div class="all-amount flex-column">
                                                    <span style="color:rgba(134, 134, 192, 1)">状态</span>
                                                        <span  class="order" v-if="ticker.fStatus==3">已完成</span>
                                                </div>
                                                <div class="all-amount flex-column">
                                                    <span style="color:rgba(134, 134, 192, 1)">时间</span>
                                                    <span>{{timestampToTime(ticker.addTime)}}</span>
                                                </div>
                                                </div>
                                            </div>
                                        </div>
                                     </div>
                                      <div class="loading-box tc" v-if="isLoading">
                                            <mt-spinner type="snake" class="loading-more"></mt-spinner>
                                            <span class="loading-more-txt">加载中...</span>
                                    </div>
                                     <div class="no-more" v-if="noMore">没有更多了~</div>
                                </div>
                            </div>
                        </div>
                     </div>
            </div>
            <div  class="total-btn" >
                <div class="flex">
                    <a class="share-btn" @click="chargeExchange()">
                        <img src="../../assets/charge2.png">
                        <span class="charge">提币</span>
                    </a>
                    <a  @click="drawExchange()">
                        <img src="../../assets/draw2.png">
                          <span class="charge">充值</span>      
                    </a>
                     <a @click="exchange()">
                        <img src="../../assets/asset.png">
                        <span class="charge">交易</span>        
                    </a>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
import axios from 'axios'
import { Toast } from 'mint-ui';
//  import { Indicator } from 'mint-ui';
 import {mapMutations, mapActions} from 'vuex';
export default {
    name:'',
   data(){
         return {
             entrustAsset:'',
             recordList:[],
                rewards:'',
                lockList:[],
                okerRatePrice:'',
             isLoading:false,
             noMore:false,
            page:1,
            symbol:'',
            totalValue:''
         }
    },
    mounted() {
         this.$http.post('v2/market/okexExchangeRate').then((res)=>{
        this.okerRatePrice = res.data.data.futureTicker.rate;
       })
        this.$http.post('v1/session?'+ new Date().getTime(),).then((res)=>{
            this.sessionData=res.data.data;
        }),
        this.getOtcList();
      this.totalAssets();
    },
      created() {
        //     Indicator.open({
        // text: '加载中...',
        // spinnerType: 'fading-circle'
        // });
  },
    methods: {
        ...mapMutations([
                'SET_PAYOUT','SET_HOME_PAGE','SET_PAYIN'
            ]),
            chargeExchange(){
                 this.SET_PAYOUT({type:this.symbol.coinId});
                    this.$router.push("/finance/payout");
            },
            drawExchange(){
                this.SET_PAYIN({payin:this.symbol.coinId});
                    this.$router.push("/finance/payin");
            },
            exchange(){
                 this.SET_HOME_PAGE({homePage:3});
                    this.$router.push({ name: 'home',query: {symbol: this.symbol.fid} });
            },
          getOtcList(){this.$http.post('/v2/market/allcoins',).then((res)=>{
                let tickers = res.data;
                 let coinGroup = {}
                    let current = {};
                    for (let i = 0; i < tickers.length; i++) {
                        let ticker = tickers[i]
                        if(ticker.coinId==this.$route.query.id){
                            current = ticker
                        }else{
                              current.lastDealPrize='1';
                        }
                    }
                   this.symbol=current;
             })
          },
        loadMore(stat) {
                   let self=this;
                    if(this.noMore){
                    return ;
                }
                if(!this.$route.query.id){
                    return ;
                }
                this.isLoading = true;
                this.noMore = false;
                   setTimeout(() => {
                let id=parseInt(this.$route.query.id);
                let param={
                    fundsTyep:0,
                    type:0,
                    page:this.page,
                    pageSize:20,
                    coinId:this.$route.query.id
                }
                  this.$http.post('v2/market/userFundeRecord',param).then((res)=>{
                       if(res.data.data.length==0){
                            self.isLoading = false;
                            self.noMore = true;
                               return ;
                            }
                        res.data.data.forEach(function(item){
                                 self.recordList.push(item);
                      })
                        self.page++;
                        self.isLoading = false;
                        self.noMore = false;
                    })
                   },3000)
        },
        getRecord(){
                let self=this;
                let param={
                    fundsTyep:0,
                    type:0,
                    page:this.page,
                    pageSize:20,
                    coinId:this.$route.query.id
                }
                  this.$http.post('v2/market/userFundeRecord',param).then((res)=>{
                           self.page++;
                            self.recordList=res.data.data;
                    })
        },
        filter(x){
            var pos= 8;
            var f = parseFloat(x);
            if (isNaN(f)) {
                return 0;
            }
            var f = Math.round(x * Math.pow(10, pos)) / Math.pow(10, pos);
            var s = f.toString();
            var rs = s.indexOf('.');
            if (rs < 0) {
                rs = s.length;
                s += '.';
            }
            while (s.length <= rs +  pos) {
                s += '0';
            }
            return parseFloat(s);
        }, 
            totalAssets(){
                let self=this;
                let id=parseInt(this.$route.query.id);
                  this.$http.post('v1/account/balances').then((res)=>{
                        res.data.data.forEach(function(item){
                            if(item.id==id){
                                 self.entrustAsset= item;
                                self.totalValue= parseFloat(self.entrustAsset.total)+parseFloat(self.entrustAsset.frozen);
                            }
                      })
                    })
            },
                   timestampToTime (cjsj) {
        var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = (date.getMinutes()< 10 ?'0'+date.getMinutes():date.getMinutes())+ ':'
        var s =(date.getMinutes()< 10 ?'0'+date.getMinutes():date.getMinutes())
        return Y+M+D+h+m+s
        },
        　　handleClose(){
                this.$router.go(-1);
            },
    }
}
</script>
<style lang="less" scoped>
.profit{
        font-size: 30px;
        display: flex;
        justify-content: space-between;
        margin: 20px;
        padding-top: 30px
}
 .total-btn {
               display: block;
    width: 100%;
    line-height: 58px;
    font-size: 30px;
    text-align: center;
    margin-bottom: 0;
    border-radius: 10px;
    height: 86px;
    font-size: 32px;
    line-height: 86px;
    color: #FFFFFF;
    z-index: 10001;
    background:rgba(22,23,54,1);
    height: 100px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    .flex{
        
        display: flex;
        justify-content: space-between;
        width: 80%;
        margin: 0 auto;
        .charge{
            color: rgba(224,224,249,1);
            font-size: 20px;
            height: 40px;
            line-height: 40px;
        }
    }
    a{
         display: flex;
        flex-direction: column;
        align-content: center;
        justify-items: center;
        align-self: center;
        width:80px;
    height:80px;
    background:rgba(22,23,54,1);
    box-shadow:0px 0px 8px 0px rgba(224,224,249,0.3);
    border-radius:4px;
    img{
        width:38px;
        height:32px;
        padding-left: 25px;
        margin-top: 4px;
        }
    }
    }
.asset{
    margin-top: 60px;
}
.font-20{
    font-size: 20px;
}
.apply-title{
    color:rgba(134, 134, 192, 1);
}
.loading-more-txt{
    color:rgba(134, 134, 192, 1);
}
.otc-ht{
display: flex;
justify-content: space-between;
color: #000000;
background:rgba(224,224,249,1);
border-radius:0px 0px 20px 20px;
height: 80px;
line-height: 80px;
padding-right: 20px;
a{
    color: #000000;
}
}

.finance .otc {
        height: 264px;
    margin: 0 40px;
    border-radius: 20px 20px 0 0;
    position: relative;
    color: #E0E0F9;
}
.finance {
    .finance-card dl {
    color: #fff;
    height: 220px;
}
.finance-card dl dt {
    font-size: 32px;
    padding: 20px;
    text-align: center;
    background:rgba(46,46,89,1);
border-radius:12px;
color: rgba(224, 224, 249, 1);
    height:100%;
    padding-left: 30px;
    padding-right: 30px;
    
  
}
.finance-card dl dd {
    margin-top: 30px;
    font-weight: 400;
     padding-left: 10px;
    padding-left: 10px;
}
}
.nav{
    display: flex;
       border-bottom:1px solid #161736;
}
.page-finance main section.finance-card {
    height: 264px;
    margin: 0 30px;
    border-radius: 20px 20px 0 0;
    background: #1882d4;
    position: relative;
}
.asset .trade-order{
    height: 100%;
}
.order-table{
    padding: 10px 0px 30px 0px;
    position: relative;
    background: #222240;
    margin: 20px 0px 20px 0px;
}
.finance {
    background: rgba(22, 23, 54, 1)
}
.order-header{
    height: 50px;
    line-height: 50px;
    border-bottom:1px solid #161736;
    color: #ADADD8;
    .flex-between{
        padding-left: 30px;
        padding-right: 30px;
    }
}
.order-header>div{
    align-items: center;
}
.order-content .all-amount:nth-child(1){
    width: 20%;
}
.order-content .all-amount:nth-child(2){
    width: 30%;
    text-align: center;
}
 .flex-column{
    flex-direction: column;
        display: flex;
}
.order-content .all-amount:nth-child(3){
    width: 50%;
    text-align: right;
}
.flex-center{
    display: flex;
   align-self: center;
   width: 100%;
}
.trade-order .flex-center{
width: 100%;
height: 90px;
    line-height: 50px;
}
.order-table .flex-between{
      display: flex;
        justify-content: space-between;
    }
.order-content{
    padding-top: 20px;
    color: #ADADD8;
    font-size: 24px;
     .flex-center{
        padding-left: 30px;
        padding-right: 30px;
    }
}
.order-select{
    margin-top: 30px;
}
::-webkit-input-placeholder {
    color: #E0E0F9;
    font-size: 28px
}

:-moz-placeholder,::-moz-placeholder {
    color: #E0E0F9;
    font-size: 28px
}

:-ms-input-placeholder {
    color: #E0E0F9;
    font-size: 28px
}

.input-box .input-title {
    height: 44px;
    font-size: 24px;
    line-height: 24px
}
.accound .user-able{
    width: 33%;
    text-align: center;
    height: 50px;
    line-height: 50px;
    :nth-child(1){
        font-size:24px;
        font-weight:600;
        color: rgba(134, 134, 192, 1);
    };
    :nth-child(2){
        font-weight:400;
        font-size:24px;
      color:  rgba(224, 224, 249, 1)
    }
}
.input-box .input-content {
    height: 124px;
    line-height: 72px;
    color: #1f3f59;
    font-size: 32px;
    font-weight: 700;
    position: relative
}
.no-more{
    text-align: center;
    color:  rgba(224, 224, 249, 1)
}

.bg-buy,.bg-up,.page-trade .trade-panel--content .trade-form.buy .submit {
    background: #03ad8f
}

.bg-down,.bg-sell,.page-trade .trade-panel--content .trade-form.sell .submit {
    background: #d14b64
}
.accound .asset .all-amount,.accound .asset .order-header{
    color: rgba(224, 224, 249, 1)
}
.mini-toastr {
    position: fixed;
    z-index: 9;
    left: calc(50% - 250px);
    top: calc(50% - 44px)
}

.mini-toastr__notification {
    cursor: pointer;
    box-sizing: border-box;
    padding: 20px 28px;
    background-color: rgba(31,63,89,.9);
    color: #fff;
    min-width: 500px;
    max-width: 500px;
    text-align: center
}

.mini-toastr-notification__message {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    font-size: 32px;
    line-height: 48px
}

.page-loading {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    line-height: 1;
    text-align: center;
    background: #fff;
    z-index: 99
}

.page-loading img {
    top: 50%;
    width: 64px
}

.page-loading img,.page-loading p {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%)
}

.page-loading p {
    top: 60%;
    line-height: 1.3;
    opacity: 0;
    transition: opacity .5s ease-in
}
.order-main .sell span{
width: 50%;
height: 90%;
line-height: 100px;
}
.tab-content{
    width: 80%;
    margin: 0 auto;
    font-size: 32px;
    font-weight:500;
}
 .finance .tab{
display: flex;
background:rgba(255,255,255,1);
height: 100px;
border-bottom:1px solid #161736
}
 .finance .active{
color: #3381FF;
}
.mint-header{
    height: 100px;
    font-size: 32px;
    background-color: #161736;
    color: #E0E0F9
}
.data-img{
        min-height: 720px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #E0E0F9
}
.data-img img{
     width: 120px;
    height: 120px;
}
 .loading-box{
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .rotate img{
    transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
-mz-transform:rotate(-180deg);
width:23px;
height:23px;
}
.recold{
    height: 60px;
    line-height: 60px;
    color: rgb(134, 134, 192);
    padding-left: 30px;
}
</style>